<template>
	<div class="pagination">
		<button :disabled="pageNo === 1" @click="changePageNo(pageNo-1)">上一页</button>
		<!-- 第5行的1如果出现，一定不亮 -->
		<button v-show="startAndEnd.start > 1" @click="changePageNo(1)">1</button>
		<span v-show="startAndEnd.start > 2">···</span>

		<button 
			v-for="(_,index) in startAndEnd.end - startAndEnd.start + 1"
			:class="{active:index+startAndEnd.start === pageNo}"
			@click="changePageNo(index+startAndEnd.start)"
		>
			{{index+startAndEnd.start}}
		</button>

		<span v-show="startAndEnd.end < totalPage - 1">···</span>
		<!-- 第14行最后一页如果出现，一定不亮 -->
		<button v-show="startAndEnd.end < totalPage" @click="changePageNo(totalPage)">{{totalPage}}</button>
		<button :disabled="pageNo === totalPage || totalPage<1" @click="changePageNo(pageNo+1)">下一页</button>
		<span class="total">共 {{total}} 条</span>
	</div>
</template>

<script>
	export default {
		name: "Pagination",
		props:['total','pageSize','pageNo','continues','changePageNo'],
		computed: {
			//总页数
			totalPage(){
				const {total,pageSize} = this
				return Math.ceil(total/pageSize)
			},
			//连续页的起始和结束位置
			startAndEnd(){
				const {pageNo,continues,totalPage} = this
				let start //用于保存连续页起始位置
				let end //用于保存连续页结束位置

				//判断一个极端不正常的情况：continues（连续页数）>  totalPage（总页数）
				if(continues > totalPage){
					/*
						分析：
							1.当continues大于totalPage时，要是直接推，会造成：要么左边推多了，要么右边推多了。
							2.通俗理解：一共才4页，你却要连续展示5页，你的要求太高了，那就直接展示1、2、3、4吧！
							3.举例：班级一共5人，要找出6个最壮的人，那就把5个人都给你吧！
					 */
					start = 1 //连续页起始位置直接是1
					end = totalPage //连续页结束位置直接是totalPage（总页数）
				}else{
					//计算连续页的起始位置
					start = pageNo - parseInt(continues/2)
					//计算连续页的结束位置
					end = pageNo + parseInt(continues/2)
					//左重置（如果左边推多了）
					if(start < 1){
						start = 1
						end = continues
					}
					//右重置（如果右边推多了）
					if(end > totalPage){
						start = totalPage - continues + 1
						end = totalPage
					}
				}
				//返回起始位置、结束位置
				return {start,end}
			}
		}
	}
</script>

<style lang="less" scoped>
	.pagination {
		text-align: center;

		button {
			margin: 0 5px;
			background-color: #f4f4f5;
			color: gray;
			outline: none;
			border-radius: 2px;
			padding: 0 4px;
			vertical-align: top;
			display: inline-block;
			font-size: 13px;
			min-width: 35.5px;
			height: 28px;
			line-height: 28px;
			cursor: pointer;
			box-sizing: border-box;
			text-align: center;
			border: 0;

			&[disabled] {
				color: #c0c4cc;
				cursor: not-allowed;
			}

			&.active {
				cursor: not-allowed;
				background-color: #C81623;
				color: #fff;
			}

		}

		span {
			display: inline-block;
			line-height: 28px;
			font-size: 14px;
			color: gray;
			vertical-align: middle;
		}

		.total{
			margin-left: 30px;
		}
	}
</style>